<template>
    <div class="my-custiom">
        <div class="my-custiom-content">
            <div class="my-custiom-title">
                <div class="avatar-container">
                    <img :src="user.imgUrl" alt="用户头像" class="avatar">
                </div>
                <div class="content-container">
                    {{ user.name }},<br>
               
                    <p style="font-weight: bold;">欢迎您，开始您一天的工作吧！</p>
                </div>

            </div>
        </div>

    </div>
</template>

<script lang="ts">
// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import Api from '../../api/api';
@Component
export default class TestPage extends Vue {
    @Prop({ type: String, default: '' })
    userId!: string;

    @Prop({ type: Array || null, default: null })
    roleIds!: any[] | null;

    @Prop({ type: Array || null, default: null })
    roleName!: any[] | null;

    @Prop({ type: String, default: '' })
    phone!: string;

    @Prop({ type: String, default: '' })
    email!: string;

    @Prop({ type: String, default: '' })
    deptName!: string;

    @Prop({ type: String, default: '' })
    deptId!: string;

    //接收情况统计
    replayToken: any = ''
    user: any = null; // 定义一个响应式属性来存储用户数据
    created() {
        this.fetchReplayToken();
    }
    mounted() {
        this.loadUserFromSessionStorage()
    }
    async fetchReplayToken() {
        this.replayToken = await Api.exportReplayToken()
        // console.log('this.replayToken', this.replayToken);

    }

    loadUserFromSessionStorage() {
        const storedUser = sessionStorage.getItem('user'); 
        if (storedUser) {
            this.user = JSON.parse(storedUser); 
            console.log('从会话存储加载的用户:', this.user);
        }
    }
}

















</script>

<style lang="less" scoped>
.my-custiom {
    height: 100%;
    width: 100%;


}

.my-custiom-content {
    padding: 20px;
    height: 100%;
    position: relative;
    background-color: #fff;
}

.my-custiom-title {
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; 

}

.my-custiom-content-text {
    font-size: 15px;
    color: black;
    padding: 5px;

    max-height: 300px;
    /* 确保高度足够 */
    overflow-y: auto;



}


/* 头像样式 */
.avatar-container {
  .avatar {
    width: 60px; /* 设置头像宽度 */
    height: 60px; /* 设置头像高度 */
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 确保图片填充整个容器 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
  }
}

/* 文字内容样式 */
.content-container {
  font-size: 16px;
  color: #333;
  margin: 0; 
}
</style>